# Правила оформления HTML-кода

1. [Синтаксис](#1-Синтаксис).  
   1.1. [Два пробела в качестве отступа](#11-Два-пробела-в-качестве-отступа).  
   1.2. [Теги и атрибуты записываются в нижнем регистре](#12-Теги-и-атрибуты-записываются-в-нижнем-регистре).  
   1.3. [Отдельные логические блоки отбиваются пустой строкой](#13-Отдельные-логические-блоки-отбиваются-пустой-строкой).  
   1.4. [Используйте только двойные кавычки](#14-Используйте-только-двойные-кавычки).  
   1.5. [Не ставим пробелов перед и после символа =](#15-Не-ставим-пробелов-перед-и-после-символа-).  
   1.6. [Между атрибутами один пробел](#16-Между-атрибутами-один-пробел).  
   1.7. [Одиночные теги без закрывающего слеша](#17-Одиночные-теги-без-закрывающего-слэша).  
2. [Валидность](#2-Валидность).
3. [!DOCTYPE](#3-doctype).
4. [Кодировка](#4-Кодировка).
5. [Подключение стилей](#5-Подключение-стилей).
6. [Подключение скриптов](#6-Подключение-скриптов).
7. [Атрибуты и их порядок](#7-Атрибуты-и-их-порядок).
8. [Логические атрибуты](#8-Логические-атрибуты).
9. [Подписи `input`](#9-Подписи-input).
10. [Атрибут языка](#10-Атрибут-языка).

## 1. Синтаксис
### 1.1 Два пробела в качестве отступа.
Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.

**Верно.**
```html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ваша страница</title>
  </head>
  <body>
    <h1>Страница</h1>
    <p>Текст</p>
  </body>
</html>
```

**Неверно.**
```html
<!DOCTYPE html>
<html lang='ru'>
<head>
	<meta charset='UTF-8'>
    <title>Ваша страница</title>
</head>
<body>
<h1>Страница</h1>
<p>Текст</p>
</body>
</html>
```

### 1.2. Теги и атрибуты записываются в нижнем регистре.
Символы нижнего регистра не привлекают к себе большого внимания, и вам легче будет найти нужный.

**Верно.**
```html
<div class="user">
  <img src="./i/userpic.png" title="Иванов Иван">
  <a href="/profile/">Перейти в профиль</a>
</div>
```

**Неверно.**
```html
<DIV Class="user">
  <Img Src="./i/userpic.png" titLE="Иванов Иван">
  <A href="/profile/">Перейти в профиль</a>
</DIV>
```

### 1.3. Отдельные логические блоки отбиваются пустой строкой.
Это облегчает работу с кодом и визуально создаёт структуру документа.

**Верно.**
```html
<h1>Заголовок первого уровня</h1>
<p>Первый параграф</p>

<h2>Заголовок второго уровня</h2>
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

<h3>Заголовок третьего уровня</h3>
<figure>
  <figcaption>Блок с картинкой</figcaption>
  <img src="../img/image.jpg">
</figure>
```

**Неверно.**
```html
<h1>Заголовок первого уровня</h1>
<p>Первый параграф</p>
<h2>Заголовок второго уровня</h2>
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>
<h3>Заголовок третьего уровня</h3>
<figure>
  <figcaption>Блок с картинкой</figcaption>
  <img src="../img/image.jpg">
</figure>
```

### 1.4. Используйте только двойные кавычки.
При написании значений атрибутов используйте только двойные кавычки.

**Верно.**
```html
<div class="first">
  <img src="first-img.jpg" alt="Первая картинка">
</div>
```

**Неверно.**
```html
<div class='first'>
  <img src='first-img.jpg' alt='Первая картинка'>
</div>
```

### 1.5. Не ставьте пробелы перед и после символа = (равно).
Так как правая часть относится к левой, то атрибут и его значение должны быть написаны без пробелов.

**Верно.**
```html
<p id="first" class="post">Это хороший пример</p>
```

**Неверно.**
```html
<p id ="first" class= "post">Это плохой пример</p>
```

### 1.6. Между атрибутами один пробел.
Не используйте переносы строк между атрибутами, ставьте только один пробел. Перенос строк принят в CSS-документах, но не в HTML-разметке. Пишите все атрибуты элемента в строку.

**Верно.**
```html
<figure class="postItem">
  <img src="logo.jpg" alt="Логотип">
  <figcaption>Логотип компании</figcaption>
</figure>
```

**Неверно.**
```html
<figure class="postItem">
  <img
  src="logo.jpg"
  alt="Логотип">
  <figcaption>Логотип компании</figcaption>
</figure>
```

### 1.7. Одиночные теги без закрывающего слеша.
Не используйте закрывающий слеш у одиночных тегов (`<img>`, `<br>` и другие). Этот элемент — пережиток прошлого, когда HTML был более строгим, а браузеры не умели распознавать и исправлять ошибки.

**Верно.**
```html
<img src="logo.jpg" alt="Логотип">
<br>
```

**Неверно.**
```html
<img src="logo.jpg" alt="Логотип" />
<br />
```

## 2. Валидность
HTML-документ должен проходить проверку на валидность. Для проверки используйте [валидатор](http://validator.w3.org/nu/).

## 3. !DOCTYPE
Первой строчкой в HTML-документе должен идти актуальный `doctype`. Это нужно, чтобы браузер верно отображал страницу и было единообразное отображение во всех современных браузерах.
```html
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>
```

## 4. Кодировка
Кодировка символов в HTML-документе всегда должна быть указана явно. Это даёт верное отображение текста. Кодировка `utf-8` подходит всегда, за редким исключением.
```html
<head>
  <meta charset="utf-8">
  <title>Заголовок</title>
</head>
```

## 5. Подключение стилей
Файлы со стилями подключаются внутри тега `<head>` при помощи `<link>`. Атрибут type для тега `<link>` указывать не нужно, так как значение `text/css` устанавливается по умолчанию.

**Верно.**: стилевой файл подключён в секции head
```html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>…</body>
</html>
```

**Неверно.**: стилевой файл подключён в секции body
```html
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>
    <link rel="stylesheet" href="style.css">
  </body>
</html>
```

## 6. Подключение скриптов
Скрипты при загрузке блокируют отображение содержимого страницы. Поэтому нужно подключать их в самом конце HTML-документа.

При подключении скриптов в теге `<script>` атрибут `type` указывать не нужно, так как значение `text/javascript` устанавливается по умолчанию.

**Верно.**: скрипт подключается перед `</body>`
```html
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>
    <!-- Содержимое страницы -->
    <script src="app.js"></script>
  </body>
</html>
```

**Неверно.**: скрипт подключается в секции `<head>`
```html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <script src="app.js"></script>
  </head>
  <body>…</body>
</html>
```

## 7. Атрибуты и их порядок
У HTML-элементов атрибут `class` пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.

Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для схожих элементов.
```html
<a class="element element-big" id="element" href="/" data-name="element">Ссылка</a>

<input class="form-control" type="text" name="test">

<img class="picture" src="img.jpg" alt="Картинка">
```

## 8. Логические атрибуты
Для логических атрибутов (например, `checked`, `disabled`, `required`) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
```html
<!-- checked="checked" необязательно -->
<input type="checkbox" required checked>

<input type="text" disabled>

<select>
  <option value="1" selected>1</option>
</select>
```

## 9. Подписи `input`
Для улучшения опыта пользователя при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега `<label>`.

**Верно.**: элемент формы `radio` связан с подписью через `id` и `for`
```html
<input type="radio" id="choose">
<label for="choose">Радио кнопка</label>
```

**Верно.**: элемент формы `radio` и подпись обёрнуты в `label`
```html
<label>
  <input type="radio"> Радио кнопка
</label>
```

**Неверно.**: подпись не связана с элементом формы
```html
<input type="radio" id="choose"> Радио кнопка
```

## 10. Атрибут языка
Для элемента `<html>` в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие языковые правила использовать.
```html
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>
```
